<html>
    <head>
        <meta name="layout" content="main-layout"></meta>
        <link rel="stylesheet" href="${resource(dir:'css',file:'composition.css')}"></link>
        <title>Composition</title>
        <g:javascript src="composition.js"/>
    </head>

    <body>
        <g:if test="${flash.message}">
            <div id="message" class='message'>${flash.message}</div>
        </g:if>

        <div id="composition-header">
            <div id="create-task-wrapper">
                <button class="new-button" onclick="createTaskDialog();">New task</button>
            </div>

            <div id="task-info-wrapper">
                <p class="short-description">
                    <img src="${resource(dir:'images',file:'task.png')}" />
                    Click 'Create task' to create new task or Edit/Delete tasks that are listed below
                </p>
            </div>
        </div>

        <div id="composition-content">
            <div id="task-panel">
                <div class="panel-title">
                    <img src="${resource(dir:'images',file:'task.png')}" />
                    <span>Task list</span>
                </div>
                <g:render template="tasksList" />
            </div>

            <g:if test="${task}">
                <div id="task-creator">
                    <div class="panel-title">
                        <img src="${resource(dir:'images',file:'screwdriver.png')}" />
                        <span>Task name: </span>
                        <span id="task-name">${task.name}</span>
                    </div>

                    <div class="section">
                        <p class="short-description">
                            <img src="${resource(dir:'images',file:'plugin.png')}" />
                            Below you can find the list of plugins
                           </p>
                        <g:render template="pluginsList" />
                    </div>

                    <div class="section">
                        <p class="short-description">
                            <img src="${resource(dir:'images',file:'connection.png')}" />
                            Below you can find the list of connections
                           </p>
                        <g:render template="connectionsList" />
                    </div>

                    <form action="editTask">
                        <button class="delete-button" type="submit" name="taskName">Cancel</button>
                    </form>
                </div>
            </g:if>
        </div>
    </body>
</html>
